<template>
    <div class="template">
        <el-tabs type="card" v-model="editableTabsValue" closable @tab-remove="removeTab">
            <el-tab-pane name="分支模板">
                <span slot="label">
                    <i class="el-icon-tickets"></i>
                    分支模板
                </span>
                <div>
                    <ItemBrancTemplate :tabsIndex="tabsIndex" :editableTabsValue="editableTabsValue" />
                </div>
            </el-tab-pane>
            <el-tab-pane name="范围模板">
                <span slot="label">
                    <i class="el-icon-tickets"></i>
                    范围模板
                </span>
                <div>
                    <ItemBoundTemplate :editableTabsValue="editableTabsValue"></ItemBoundTemplate>
                </div>
            </el-tab-pane>
            <el-tab-pane name="模板复核">
                <span slot="label">
                    <i class="el-icon-tickets"></i>
                    模板复核
                </span>
                <div>
                    <ItemTemplateCheck :editableTabsValue="editableTabsValue"></ItemTemplateCheck>
                </div>
            </el-tab-pane>
            <el-tab-pane name="特殊计算">
                <span slot="label">
                    <i class="el-icon-tickets"></i>
                    特殊计算
                </span>
                <div>
                    <ItemSpecialCalc :editableTabsValue="editableTabsValue" :type="'special'" :key="specialKey"></ItemSpecialCalc>
                </div>
            </el-tab-pane>

            <el-tab-pane name="分母">
                <span slot="label">
                    <i class="el-icon-tickets"></i>
                    分母
                </span>
                <div>
                    <ItemSpecialCalc :editableTabsValue="editableTabsValue" :type="'deno'" :key="denoKey"></ItemSpecialCalc>
                </div>
            </el-tab-pane>

            <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
                <ItemSpecialDetail
                    :itemData="item"
                    @close-custom="openCustom"
                    v-if="
                        item.type == 'add-special' ||
                            item.type == 'edit-special' ||
                            item.type == 'look-special' ||
                            item.type == 'add-deno' ||
                            item.type == 'edit-deno' ||
                            item.type == 'look-deno'
                    "
                ></ItemSpecialDetail>
                <ItemBranchTemplateDetail
                    :itemData="item"
                    @close-custom="openCustom"
                    v-if="
                        item.type == 'add-branch' ||
                            item.type == 'edit-branch' ||
                            item.type == 'look-branch' ||
                            item.type == 'copy-branch' ||
                            item.type == 'check-branch'
                    "
                ></ItemBranchTemplateDetail>
                <ItemBoundDetail
                    :itemData="item"
                    @close-custom="openCustom"
                    v-if="
                        item.type == 'add-bound' ||
                            item.type == 'edit-bound' ||
                            item.type == 'look-bound' ||
                            item.type == 'copy-bound' ||
                            item.type == 'check-bound'
                    "
                ></ItemBoundDetail>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { mixins } from 'vue-class-component';
import RiskEmitter from '@/common/mixis/risk-emitter.vue';
import ItemSpecialCalc from './components/item-template/item-specialCalc.vue';
import ItemSpecialDetail from './components/item-template/item-special-detail.vue';
import ItemBrancTemplate from './components/item-template/item-branc-template.vue';
import ItemBranchTemplateDetail from './components/item-template/item-branch-template-detail.vue';
import ItemBoundTemplate from './components/item-template/item-bound-template.vue';
import ItemBoundDetail from './components/item-template/item-bound-detail.vue';
import ItemTemplateCheck from './components/item-template/item-template-check.vue';

@Component({
    name: 'ItemTemplate',
    components: {
        ItemSpecialCalc,
        ItemSpecialDetail,
        ItemBrancTemplate,
        ItemBranchTemplateDetail,
        ItemBoundTemplate,
        ItemBoundDetail,
        ItemTemplateCheck,
    },
})
export default class ItemTemplate extends mixins(RiskEmitter) {
    editableTabsValue: string = '分支模板';
    editableTabs: any = [];
    tabsIndex: any = 0;
    setTables: string = '';

    created() {
        this.$on('addTables', this.changComponets);
        this.$on('checkTables', this.checkComponets);
    }

    // 监控子组件发送的命令
    changComponets(datas: any) {
        console.log(datas, 'datas');

        const data: any = {};
        data.type = datas.type;
        data.content = datas.value;
        if (datas.type === 'add-special') {
            data.title = '新增:特殊计算';
            data.name = '新增:特殊计算';
            this.setTables = '特殊';
        } else if (datas.type === 'look-special') {
            data.title = '查看:特殊计算-' + datas.value;
            data.name = '查看:特殊计算-' + datas.value;
            this.setTables = '特殊';
        } else if (datas.type === 'edit-special') {
            data.title = '编辑:特殊计算-' + datas.value;
            data.name = '编辑:特殊计算-' + datas.value;
            this.setTables = '特殊';
        } else if (datas.type === 'add-deno') {
            data.title = '新增:分母';
            data.name = '新增:分母';
            this.setTables = '分母';
        } else if (datas.type === 'look-deno') {
            data.title = '查看:分母-' + datas.value;
            data.name = '查看:分母-' + datas.value;
            this.setTables = '分母';
        } else if (datas.type === 'edit-deno') {
            data.title = '编辑:分母-' + datas.value;
            data.name = '编辑:分母-' + datas.value;
            this.setTables = '分母';
        } else if (datas.type === 'add-branch') {
            data.title = '新增：分支模板';
            data.name = '新增：分支模板';
            this.setTables = '分支';
        } else if (datas.type === 'edit-branch') {
            data.title = '编辑：分支模板' + datas.value;
            data.name = '编辑：分支模板' + datas.value;
            this.setTables = '分支';
        } else if (datas.type === 'look-branch' || datas.type === 'check-branch') {
            data.title = '查看：分支模板' + datas.value;
            data.name = '查看：分支模板' + datas.value;
            this.setTables = '分支';
        } else if (datas.type == 'copy-branch') {
            console.log('datas.value', datas.value);
            data.title = '复制：分支模块' + datas.value;
            data.name = '复制：分支模块' + datas.value;
            this.setTables = '分支';
        } else if (datas.type === 'add-bound') {
            data.title = '新增：范围模板';
            data.name = '新增：范围模板';
            this.setTables = '范围';
        } else if (datas.type === 'edit-bound') {
            data.title = '编辑：范围模板' + datas.value;
            data.name = '编辑：范围模板' + datas.value;
            this.setTables = '范围';
        } else if (datas.type === 'look-bound' || datas.type === 'check-bound') {
            data.title = '查看：范围模板' + datas.value;
            data.name = '查看：范围模板' + datas.value;
            this.setTables = '范围';
        } else if (datas.type == 'copy-bound') {
            data.title = '复制：范围模块' + datas.value;
            data.name = '复制：范围模块' + datas.value;
            this.setTables = '范围';
        }
        const item = this.editableTabs.find((item: any) => item.name === data.name);
        if (!item) {
            this.addTab(data);
        } else {
            this.editableTabsValue = data.name;
        }
    }

    // 复核
    checkComponets(datas: any) {
        this.setTables = '复核';
        const data: any = {};
        if (datas.value.type == '1') {
            data.type = 'check-branch';
            data.title = '查看：分支模块' + datas.value.templateCode;
            data.name = '查看：分支模块' + datas.value.templateCode;
            data.content = datas.value.templateCode;
        } else if (datas.value.type == '2') {
            data.type = 'check-bound';
            data.title = '查看：范围模块' + datas.value.templateCode;
            data.name = '查看：范围模块' + datas.value.templateCode;
            data.content = datas.value.templateCode;
        }
        const item = this.editableTabs.find((item: any) => item.name === data.name);
        if (!item) {
            this.addTab(data);
        } else {
            this.editableTabsValue = data.name;
        }
    }

    // 传过来的关闭页面
    getInstruct(data: any) {
        console.log(data);
        this.tabsIndex = this.tabsIndex + 1;
        this.removeTab(data.targetName);
    }

    // 关闭tabs
    removeTab(targetName: any) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
            tabs.forEach((tab: any, index: any) => {
                if (tab.name === targetName) {
                    let nextTab = tabs[index + 1] || tabs[index - 1];
                    if (nextTab) {
                        activeName = nextTab.name;
                    }
                }
            });
        }
        // 默认跳转到条目设置
        if (this.setTables == '分支') {
            this.editableTabsValue = '分支模板';
        } else if (this.setTables == '范围') {
            this.editableTabsValue = '范围模板';
        } else if (this.setTables == '特殊') {
            this.editableTabsValue = '特殊计算';
        } else if (this.setTables == '分母') {
            this.editableTabsValue = '分母';
        } else if (this.setTables == '复核') {
            this.editableTabsValue = '模板复核';
        } else {
            this.editableTabsValue = '分支模板';
        }
        this.editableTabs = tabs.filter((tab: any) => tab.name !== targetName);
    }

    // 新增tabs
    addTab(targetName: any) {
        this.editableTabs.push(targetName);
        this.editableTabsValue = targetName.name;
    }

    // 关闭自定义
    openCustom(data: any) {
        console.log(data);
        this.removeTab(data.name);
    }
}
</script>
<style lang="scss" scoped>
.template {
    padding-top: 10px;
}
.template /deep/ .el-tabs .el-tabs__nav .el-tabs__item {
    line-height: 34px;
    padding: 0 25px;
}

.template /deep/ .el-tabs .el-tabs__nav .el-tabs__item span {
    border-right: 0px solid #fff;
}

.template /deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(-n + 5) .el-icon-close {
    display: none;
}
</style>
